<template>
  <div id="app">
    <div class="my-list-nav"></div>
    <div class="nav-contant">
      <div class="label">
        <p class="more-title">
          <Icon style="margin-right:5px" type="md-return-right" />更多
        </p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
      </div>
      <div class="label">
        <p class="more-title">
          <Icon style="margin-right:5px" type="md-pricetag" />标签
        </p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
        <p class="item">logo模板</p>
      </div>
      <p class="hr"></p>
      <div class="label">
        <p class="more-title">
          <Icon style="margin-right:5px" type="ios-funnel" />价格
        </p>
        <RadioGroup style="margin-left:5px" v-model="animal">
          <Radio label="全部"></Radio>
          <Radio label="免费"></Radio>
          <Radio label="付费"></Radio>
          <Radio label="SVIP免费"></Radio>
          <Radio label="SVIP优惠"></Radio>
        </RadioGroup>
        <div class="sort-div">
          <p>
            <Icon type="md-arrow-dropdown" />热度
          </p>
          <p>
            <Icon type="md-arrow-dropdown" />随机
          </p>
          <p>
            <Icon type="md-arrow-dropdown" />修改时间
          </p>
          <p>
            <Icon type="md-arrow-dropdown" />发布时间
          </p>
          <p>
            <Icon type="md-arrow-dropdown" />评论数量
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>
<style scoped>
.ivu-radio-wrapper{
    margin-left: 10px;
}
.sort-div {
  position: absolute;
  right: 40px;
  font-size: 16px;
  display: flex;
}
.sort-div > p {
  margin-left: 20px;
}
.hr {
  width: 100%;
  height: 1px;
  background-color: #eee;
  margin-top: 10px;
  margin-bottom: 10px;
}
#app {
  color: #7b8695;
}
.item:hover {
  background-color: #eee;
  border: 1px dashed #bbb;
  border-radius: 4px;
  color: #999;
}
.item {
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 8px;
  margin-right: 8px;
  border: 1px solid #fff;
}
.label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.more-title {
  background-color: #eee;
  width: 70px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
}
.my-list-nav {
  background-image: url("../assets/banner/nav.jpg");
  width: 100%;
  height: 142px;
}
.nav-contant {
  position: relative;
  width: 76%;
  height: 180px;
  margin: 0 auto;
  margin-top: -30px;
  border-radius: 6px;
  padding: 20px;
  padding-top: 30px;
  background-color: #fff;
}
</style>
